<template>
    <div id="login">
        <h1>登陆</h1>
        <van-form @submit="onSubmit">
        <van-field
        v-model="formData.phone"
        placeholder="手机/用户名"
        :rules="[{ required: true,  pattern:/^1[3-9]\d{9}$/,message: '请填写正确的手机号' }]"
    />
        <van-field
        v-model="formData.pass"
        type="password"
        placeholder="密码"
        :rules="[{pattern:/^\d{4,}$/, required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
    </van-form>
    <div class="option">
        <span>手机号登陆</span>
        <span>忘记密码</span>
    </div>
    <div class="warn">
        <input type="radio">已阅读并同意<span>《用户服务协议》、《隐私政策》</span>
    </div>
  </div>
</template>

<script>
import { user_login } from '@/utils/api'
import { Toast } from 'vant'
import { mapActions } from 'vuex'
export default {
    data(){
        return {
            formData:{
                phone: '',
                pass: '', 
            },
        }
    },
    methods:{
        onSubmit(){
              user_login(this.formData).then((res)=>{
                if(res.data.code==200){
                    Toast.success('登陆成功!');
                    localStorage.setItem('token',res.data.token);
                    localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo));
                    this.$router.push('/');
                    
                    // this.$store.dispatch('request_favlist');
                    this.request_favlist();
                    this.request_shopcartlist();
                    this.request_address();
                }else{
                    Toast.fail('登陆失败!') 
                }
            })
        } ,
        ...mapActions('collectlist',['request_favlist']),
        ...mapActions('shopcart',['request_shopcartlist']),
        ...mapActions('address',['request_address'])
        },
        
    }

</script>

<style lang="scss" scoped>
#login{
  margin: 50px 20px;
}
#login h1{
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  margin-bottom: 50px;
}
#login .van-field{
  margin: 20px 0;
}
#login .van-field input{
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}
#login .option{
    display: flex;
    justify-content: space-between;
    color: skyblue;
}
#login .warn{
    position: absolute;
    bottom: 20%;
    left: 10%;
    font-size: 12px;
    color: #959595;
    input{
        margin:0 5px;
        width: 12px;
        height: 12px;
    }
    span{
        color: skyblue;
        line-height: 12px;
    }
}
</style>